import React, { useCallback } from 'react';
import * as THREE from 'three';
import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js';
import Stats from 'stats-js';
import * as dat from 'dat.gui';

export default function Index() {
  const refWrap = React.createRef();
  const refCanvas = React.createRef();
  const [camera, setCamera] = React.useState();
  const [renderer, setRenderer] = React.useState();
  const [plane, setPlane] = React.useState();
  const [scene, setScene] = React.useState();
  // 动画帧数
  const initStats = () => {
    const stats = new Stats();
    stats.setMode(0);
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.left = '0';
    stats.domElement.style.top = '0';
    document.body.appendChild(stats.domElement);
    return stats;
  };

  const init = () => {
    // const stats = initStats();
    refCanvas.current.width = refWrap.current.clientWidth;
    refCanvas.current.height = refWrap.current.clientHeight;
    const scene = new THREE.Scene();
    // const camera = new THREE.PerspectiveCamera(
    //   45,
    //   refCanvas.current.width / refCanvas.current.height,
    //   0.1,
    //   1000
    // );
    const camera = new THREE.OrthographicCamera(
      refCanvas.current.width / -16,
      refCanvas.current.width / 16,
      refCanvas.current.height / 16,
      refCanvas.current.height / -16,
      -200,
      500
    );
    camera.position.x = -20;
    camera.position.y = 20;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    const renderer = new THREE.WebGLRenderer({ canvas: refCanvas.current });

    renderer.setClearColor(0xeeeeee, 1.0);
    renderer.setSize(refCanvas.current.width, refCanvas.current.height);
    // 添加坐标系
    const axes = new THREE.AxesHelper(50);
    scene.add(axes);
    // 添加光
    // 添加地板
    const planeGeometry = new THREE.PlaneGeometry(80, 50);
    const planeMaterial = new THREE.MeshBasicMaterial({ color: '#50BBE4', opacity: 0.5, transparent: true });
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.rotation.x = -90 * (Math.PI / 180);
    scene.add(plane);
    // 添加左上角立方体
    const cubeGeometry = new THREE.BoxGeometry(26, 4, 12);
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: '#50BBE4', opacity: 0.7, transparent: true });
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    // 立方体的线
    const edges = new THREE.EdgesGeometry(cubeGeometry);
    const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: '#fff' }));

    cube.position.x = -20;
    cube.position.y = 2;
    cube.position.z = -8;
    line.position.x = -20;
    line.position.y = 2;
    line.position.z = -8;
    scene.add(line);
    scene.add(cube);
    // 添加立方体上放的正方形
    for (let i = 0; i < 4; i++) {
      const planeUpGeometry = new THREE.PlaneGeometry(4, 6);
      const planUpMaterial = new THREE.MeshBasicMaterial({ color: '#fff', opacity: 0.7, wireframe: true });
      const planUp = new THREE.Mesh(planeUpGeometry, planUpMaterial);
      planUp.rotation.x = -90 * (Math.PI / 180);
      planUp.position.y = 5;
      planUp.position.x = -30 + i * 6;
      planUp.position.z = -7;
      scene.add(planUp);
    }

    // 渲染页面
    renderer.render(scene, camera);
  };

  React.useEffect(() => {
    init();
  }, []);

  React.useEffect(() => {}, [camera]);

  return (
    <div ref={refWrap} style={{ width: '100%', height: '100%' }}>
      <canvas ref={refCanvas}></canvas>
    </div>
  );
}
